<template>
    <Card dis-hover :bordered="false">
        <div class="ivu-mb-16">
            <Input v-width="220" v-model="params.name" placeholder="请输入文件名"   @on-enter="getUserList" @on-clear="getUserList" clearable/>
            <Button class="ivu-fr" type="primary" @click="handleAdd">新增</Button>
            <Button class="ivu-mr-16 ivu-ml-16 ivu-fr" type="error" :disabled="disabled" @click="handleBatch" v-hasC="{ name: 'v1-base-tag-delete-tag2', flag: 'v1/base/tag/delete-tag'}">批量删除</Button>
        </div>
        <Table :columns="columns" :data="list" :loading="loading" :border="true" @on-selection-change="changeSelection" v-hasC="{ name: 'v1-base-tag-index', flag: 'v1/base/tag/index'}">
            <template #status="{row}">
                <Badge v-if="+row.status === 1" status="success" text="正常" />
                <Badge v-if="+row.status === 0" status="error" text="停用" />
            </template>
            <template #action="{row}">
                <a @click="handleEdit(row)" v-hasC="{ name: 'v1-base-tag-update-tag', flag: 'v1/base/tag/update-tag'}">编辑</a>
                <Divider type="vertical" v-hasC="{ name: 'v1-base-tag-delete-tag', flag: 'v1/base/tag/delete-tag'}"></Divider>
                <a @click="handleDelete(row)" class="delete" v-hasC="{ name: 'v1-base-tag-delete-tag', flag: 'v1/base/tag/delete-tag'}">删除</a>
            </template>
        </Table>
        <Page class="ivu-mt-16" show-total show-elevator show-sizer :total="total" :current.sync="params.page" :page-size="params.pageSize" @on-change="changepage" @on-page-size-change="changepageSize" v-hasC="{ name: 'v1-base-tag-index', flag: 'v1/base/tag/index'}"></Page>
        <Modal :title="add?'新增':'编辑'" width="960" v-model="modal" :mask-closable="false" :draggable="true"    @on-cancel='handleCancel'>
            <Form  :label-width="118" ref="formValidate" :model="formData" :rules="rules">
                <FormItem label="标签名称" prop="name">
                    <Input  placeholder="请输入标签名称,多个用逗号隔开 " v-model="formData.name"/>
                </FormItem>
                <FormItem label="类型" prop="type">
                    <Select v-model="formData.type">
                      <Option v-for="(item,index) in tagTypes" :value="+index" :key="index">{{item}}</Option>
                    </Select>
                </FormItem>
                <FormItem label="排序" prop="sort">
                    <InputNumber :min="1" :precision="0" v-model="formData.sort"/>
                </FormItem>
                <FormItem label="状态" prop="status">
                    <Switch v-model="formData.status" />
                </FormItem>
            </Form>
            <template #footer>
                <Button @click="handleCancel">取消</Button>
                <Button type="primary" @click="handleSave" :loading="modalLoading">确定</Button>
            </template>
        </Modal>
    </Card>
</template>
<script>
import { tagList,createTag,updateTag,deleteTag } from '@/api/set'
export default {
    name: 'modalName',
    data () {
        return {
            add: true,
            modal: false,
            total:0,
            disabled:true,
            selectionId:[],
            formData: {
                name:'',
                type:'',
                sort: null,
                status: true,
                id:''
            },
            params:{name:"",page:1,pageSize:10},
            loading: false,
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: 'id',
                    key: 'id',
                    width: 80
                },
                {
                    title: '标签名称',
                    key: 'name',
                    minWidth: 158,
                    tooltip: true
                },
                {
                    title: '类型',
                    key: 'type_name',
                    width: 118
                },
                {
                    title: '文档数',
                    key: 'arc_num',
                    width: 90
                },
                {
                    title: '排序',
                    key: 'sort',
                    width: 90
                },
                {
                    title: '状态',
                    slot: 'status',
                    width: 90
                },
                {
                    title: '创建时间',
                    key: 'created_at',
                    width: 160
                },
                {
                    title: '操作',
                    slot: 'action',
                    width: 118
                }
            ],
            list: [],
            modalLoading:false,
            rules:{
                name:[
                    { required: true, message: '请输入标签名称',trigger:'bulr' }
                ],
                type:[
                    { required: true, message: '请选择标签类型',trigger:'change,bulr' ,type:"number"}
                ]
            },
            tagTypes:[]
        }
    },
    created () {
        this.getData()
    },
    methods: {
        getUserList(){
            this.getData()
        },
        changepage(index){
            this.params.page=index
            this.getData()
        },
        changepageSize(val){
            this.pageSize=val
            this.getData()
        },
        getData () {
            this.loading = true
            tagList(this.params).then(res => {
                this.list = res.list
                this.total=res.total
                this.tagTypes=res.tag_type
            }).finally(() => {
                this.loading = false
            })
        },
        handleAdd () {
            this.add = true
            this.modal = true
        },
        handleEdit (row) {
            this.add = false
            this.formData= {
                name:row.name,
                type:+row.type,
                sort:row.sort,
                status: +row.status===1?true:false,
                id:row.id
            },
            this.modal = true
        },
        handleCancel(){
            this.modal=false
            this.$refs.formValidate.resetFields();
        },
        handleSave(){
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    const params={
                        name:this.formData.name,
                        type:this.formData.type,
                        sort:this.formData.sort,
                        status:this.formData.status===true?1:0
                    }
                    this.modalLoading=true
                    if(this.add){
                        createTag(params).then(res=>{
                            this.$Message.success('新增成功');
                            this.modalLoading=false
                            this.handleCancel()
                            this.getData()
                        }).catch(()=>{
                            this.modalLoading=false
                        })
                    }else{
                        updateTag(Object.assign({},params,{id:this.formData.id})).then(res=>{
                            this.$Message.success('编辑成功');
                            this.modalLoading=false
                            this.handleCancel()
                            this.getData()
                        }).catch(()=>{
                            this.modalLoading=false
                        })
                    }
                  
                }
            })
        },
        changeSelection(selection){
            if(selection.length>0){
                this.disabled=false
            }else{
                this.disabled=true
            }
            this.selectionId=[]
            selection.map(item=>{
                this.selectionId.push(item.id)
            })
            // console.log(this.selectionId,'selection')
        },
        handleBatch(){
            this.$Modal.confirm({
                title: '温馨提示',
                content: '确定批量删除标签?',
                onOk: () => {
                    deleteTag({id:this.selectionId}).then(res=>{
                        this.$Message.success('删除成功！')
                        this.disabled=true
                        this.getData()
                    })
                    
                }
            })
        },
        handleDelete (row) {
            this.$Modal.confirm({
                title: '温馨提示',
                content: '确定删除此项?',
                onOk: () => {
                    deleteTag({id:row.id}).then(res=>{
                        this.$Message.success('删除成功！')
                        this.getData()
                    })
                    
                }
            })
        }
    },

}
</script>
<style lang='less' scoped>
.imageUpdate {
    display: flex;
}

.delete {
    color: rgb(226, 5, 5)
}
</style>
